<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数学公式渲染示例</title>
    <link href="./assets/styles/base.css" rel="stylesheet" type="text/css" />
    <link href="./assets/katex//katex.css" rel="stylesheet" type="text/css" />
    <script src="./assets/js/mack.js"></script>
    <style>
          .katex {
            font-size: 1em; /* 调整字体大小 */
            color: #000; /* 修改字体颜色 */
          }

          .math-processed {
            font-size: 14px;
          }
          body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
          }
          .formula-container {
            margin-bottom: 10px;

            border-radius: 5px;
          }
          .formula-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
          }
          .math-content {
            margin: 10px 0;
          }
          .inline-math {
            display: inline;
          }
          .block-math {
            display: block;
            text-align: center;
            margin: 15px 0;
          }
          .test-input {
            width: 100%;
            height: 100px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: monospace;
          }
          .render-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px 0;
          }

          .render-btn:hover {
            background-color: #0056b3;
          }

          .question-content {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background-color: #f0f8ff;
          }
          /* 小黑点强调效果 */
          [data-label="emphasis_dot"] {
            position: relative;
            display: inline-block;
          }

          [data-label="emphasis_dot"]::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 2px;
            background-color: #000;
            border-radius: 50%;
          }
          p {
            font-size: 14px !important;
          }
          [data-label="emphasis_wave"] {
            text-decoration: underline wavy;
            /* 可选：自定义颜色 */
            text-decoration-color: #000;
            /* 可选：自定义波浪线粗细 */
            text-decoration-thickness: 1px;
          }
          .indent-2 {
            text-indent: 2em !important;
          }
          p {
            margin: 0;
            padding: 5px 0;
            line-height: 20px;
          }
          /* .katex-display {
          display: inline-block !important;
        } */
          .option-item {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
          }
          .option-item {
            margin-top: 10px;
            margin: 10px 0;
            padding: 15px;
            border-radius: 8px;
            background-color: #f7f8fc;
          }
          .item-options {
            margin: 10px 0;
            padding: 15px;
            border-radius: 8px;
            background-color: #f7f8fc;
          }
          .option-itemxx {
            margin: 15px 0;
            border-radius: 8px;
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          }
          /* 删除空的 .option-itemOptions 规则以避免 lint 警告 */
          /* 图片响应式处理 */
          img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 4px;
          }
          /* 确保图片容器不会溢出 */
          .formula-container {
            overflow-x: auto;
          }

          .katex-html {
            display: none;
          }
          /* 使用伪元素为子题添加 1. 2. 编号 */
          #mixed-content-container {
            counter-reset: childIndex;
          }
          .latex-child-item {
            position: relative;
            padding-left: 1.2em;
          }
          .latex-child-item::before {
            counter-increment: childIndex;
            content: counter(childIndex) ". ";
            position: absolute;
            left: 0;
            font-size: 1em;
            margin-top: 3px;

            color: #333;
            user-select: none;
          }
          p img {display:inline-block;}
      <!--   #mixed-content-container > p:first-of-type {-->
      <!--  font-weight: 700 !important; /* 常规粗细 */-->
      <!--}-->
    </style>
  </head>
  <body>
    <div class="formula-container">
      <div class="math-content">
        <div id="mixed-content-container">
          <!-- 混合内容将通过JavaScript动态生成 -->
        </div>
      </div>
      <!-- <button class="render-btn" onclick="renderMixedContent()">
渲染混合内容
</button> -->
    </div>

    <script src="./assets/katex/katex.min.js"></script>
    <script src="./assets/katex/contrib/auto-render.min.js"></script>
    <script>
      // ------- vLatex helper: ported from Angular directive/pipe to plain JS -------
      function structureToHtml(structure) {
        if (!structure) return "";
        if (typeof structure === "string") return structure;
        let html =
          (structure.structures || []).map((v) => v.content).join("") ||
          structure.itemContent ||
          "";
        if (structure.itemOptions && structure.itemOptions.length) {
          html +=
            "<div class='item-options'>" +
            structure.itemOptions.map((v) => v.content).join("") +
            "</div>";
        }
        if (structure.items && structure.items.length) {
          html +=
            '<div class="latex-child-item">' +
            structure.items
              .map((v, idx) => structureToHtml(v.structure || v))
              .join('</div><div class="latex-child-item">') +
            "</div>";
        }
        return html || "";
      }

      function normalizeImgSize(html) {
        if (!html) return "";
        let imgReg = /<img.*?(?:>|\/>)/gi;
        let widthReg = /width=[\'\"]?([^\'\"]*)[\'\"]?/i;
        let heightReg = /height=[\'\"]?([^\'\"]*)[\'\"]?/i;
        let arr = html.match(imgReg) || [];
        for (let i = 0; i < arr.length; i++) {
          let width = arr[i].match(widthReg);
          let height = arr[i].match(heightReg);
          if (width) {
            html = html.replace(
              `width="${width[1]}"`,
              `style="width:${width[1]}px"`
            );
          }
          if (height) {
            html = html.replace(
              `height="${height[1]}"`,
              `style="height:${height[1]}px"`
            );
          }
        }
        return html;
      }

      window.vLatex = function (el, latexOrStructure) {
        if (!el || !latexOrStructure) return;
        let html =
          typeof latexOrStructure === "string"
            ? latexOrStructure
            : structureToHtml(latexOrStructure);
        html = normalizeImgSize(html);
        el.innerHTML += html;
        if (window.renderMathInElement) {
          window.renderMathInElement(el, {
            delimiters: [{left: "$$", right: "$$", display: false}],
            throwOnError: false,
            strict: false,
          });
        }
        const optionsList = el.querySelectorAll(".item-options") || [];
        optionsList.forEach((container) => {
          const styles = getComputedStyle(container);
          const contentWidth =
            Number(styles.width.replace("px", "")) -
            Number(styles.paddingLeft.replace("px", "")) -
            Number(styles.paddingRight.replace("px", ""));
          const children = Array.prototype.slice
            .call(container.childNodes, 0)
            .filter((n) => n.nodeType === 1);
          if (children.length === 0) return;
          const max = Math.max(...children.map((x) => x.offsetWidth || 0));
          if (max < Math.floor(contentWidth / children.length)) {
            container.classList.add(`options-width-${children.length}`);
            return;
          }
          if (max < Math.floor(contentWidth / 2)) {
            container.classList.add("options-width-2");
            return;
          }
          container.classList.add("options-width-1");
        });
      };

      // 等价于 [latex]="value|structure"
      window.latex = function (el, value) {
        if (!el) return;
        vLatex(el, value);
      };

      // 等价于 <div *ngIf="value" [latex]="value|structure"></div>
      window.latexIf = function (el, value) {
        if (!el) return;
        if (value) {
          vLatex(el, value);
        }
      };

      // 点击按钮渲染：等价于 <div [latex]="amaa|structure"></div>
      function renderMixedContent() {
        /* amaa = JSON.parse(topicsClass.getData()).structure; */
        const container = document.getElementById("mixed-content-container");
        container.innerHTML = "";
        latex(container, amaa);
        const emphasisElements = container.querySelectorAll(
          '[data-label="emphasis_dot"]'
        );
        emphasisElements.forEach((element) => {
          const text = element.textContent || element.innerText;
          if (/^[\s\u00A0]+$/.test(text)) {
            element.removeAttribute("data-label");
          }
        });
      }
    </script>
  </body>
</html>
